<template>
  <div>
    <van-tabs color="#4e6ef2" v-model:active="weekIndex">
      <van-tab v-for="(item, index) in week" v-bind:key="item" :title="item">
        <div style="margin-top: 3px">
          <ul
            id="update-anime-ul"
            v-for="ite in weekContent[index]"
            v-bind:key="ite"
          >
            <li class="update-anime-li">
              <a class="update-anime-name">{{ ite.name }}</a>
              <a class="update-anime-number">{{ ite.number }}</a>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
    <div>
      <h2 class="daily-recommend-h2">每日推荐</h2>
      <van-grid class="daily-recommend-grid" :column-num="3" :gutter="3">
        <van-grid-item text="文字">
          <van-image
            fit="contain"
            width="92"
            height="128"
            src="//tvax3.sinaimg.cn/large/008kBpBlgy1gt1600505bj304605sjre.jpg"
          />
          <a class="van-ellipsis daily-recommend-title">
            请问您今天要来点兔子吗？
          </a>
        </van-grid-item>
        <van-grid-item>
          <van-image
            fit="contain"
            width="92"
            height="128"
            src="//tvax3.sinaimg.cn/large/008kBpBlgy1gt1600505bj304605sjre.jpg"
          />
          <a class="van-ellipsis daily-recommend-title">
            请问您今天要来点兔子吗？
          </a>
        </van-grid-item>
        <van-grid-item>
          <van-image
            fit="contain"
            width="92"
            height="128"
            src="//tvax3.sinaimg.cn/large/008kBpBlgy1gt1600505bj304605sjre.jpg"
          />
          <a class="van-ellipsis daily-recommend-title">
            请问您今天要来点兔子吗？
          </a>
        </van-grid-item>
      </van-grid>
    </div>
    <div>
      <h2 class="daily-recommend-h2">最近更新</h2>
      <van-grid class="daily-recommend-grid" :column-num="3" :gutter="3">
        <van-grid-item text="文字">
          <van-image
            fit="contain"
            width="92"
            height="128"
            src="//tvax3.sinaimg.cn/large/008kBpBlgy1gt1600505bj304605sjre.jpg"
          />
          <a class="van-ellipsis daily-recommend-title">
            请问您今天要来点兔子吗？
          </a>
        </van-grid-item>
        <van-grid-item>
          <van-image
            fit="contain"
            width="92"
            height="128"
            src="//tvax3.sinaimg.cn/large/008kBpBlgy1gt1600505bj304605sjre.jpg"
          />
          <a class="van-ellipsis daily-recommend-title">
            请问您今天要来点兔子吗？
          </a>
        </van-grid-item>
        <van-grid-item>
          <van-image
            fit="contain"
            width="92"
            height="128"
            src="//tvax3.sinaimg.cn/large/008kBpBlgy1gt1600505bj304605sjre.jpg"
          />
          <a class="van-ellipsis daily-recommend-title">
            请问您今天要来点兔子吗？
          </a>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      week: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      weekIndex: 2,
      weekContent: [
        [
          { name: "刀剑神域", number: "第25集（完结篇-阿萨德）", url: "/a" },
          { name: "刀剑神域", number: "第25集", url: "/a" },
          { name: "刀剑神域", number: "第25集", url: "/a" },
        ],
        [
          { name: "刀剑神域", number: "第25集", url: "/a" },
          { name: "刀剑神域", number: "第25集", url: "/a" },
          { name: "刀剑神域", number: "第25集", url: "/a" },
        ],
        [
          {
            name: "刀剑神域刀剑神域刀剑神域刀剑神域刀剑神域",
            number: "第25集",
            url: "/a",
          },
          { name: "刀剑神域", number: "第25集", url: "/a" },
          { name: "刀剑神域", number: "第25集", url: "/a" },
        ],
        [
          { name: "刀剑神域刀剑神域刀剑神域", number: "第25集", url: "/a" },
          { name: "刀剑神域", number: "第25集", url: "/a" },
          { name: "刀剑神域", number: "第25集", url: "/a" },
        ],
        [
          { name: "刀剑神域", number: "第25集", url: "/a" },
          { name: "刀剑神域", number: "第25集", url: "/a" },
          { name: "刀剑神域", number: "第25集", url: "/a" },
        ],
        [
          { name: "刀剑神域", number: "第25集", url: "/a" },
          { name: "刀剑神域", number: "第25集", url: "/a" },
          { name: "刀剑神域", number: "第25集", url: "/a" },
        ],
        [
          { name: "刀剑神域", number: "第25集", url: "/a" },
          { name: "刀剑神域", number: "第25集", url: "/a" },
          { name: "刀剑神域", number: "第25集", url: "/a" },
        ],
      ],
    };
  },
  created() {},
};
</script>

<style>
#update-anime-ul {
  font-size: 14px;
  background-color: #f2f3f5;
  border: 1px solid #f2f3f5;
  border-radius: 2px;
  padding: 1px 8px;
}

.update-anime-li {
  font-size: 14px;
  border-radius: 2px;
}
.update-anime-name {
  width: 180px;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-decoration-color: #bbbbbc;
}
.update-anime-number {
  width: 108px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #60b8cc;
  text-decoration-color: #4a94a3;
  margin-left: 20px;
}
.daily-recommend-h2 {
  color: #4e6ef2;
  font-size: 1.15em;
  margin-bottom: 0px;
}
.daily-recommend-grid {
  padding: 3px;
}
.daily-recommend-title {
  width: 92px;
  margin-top: 3px;
  font-size: 12px;
}
.lately-update-h2 {
  color: #4e6ef2;
  font-size: 1.15em;
  margin-bottom: 0px;
}
</style>